<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全屏相册拖拽</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #Scroll{
            width:100%;
            height:70px;
            background:rgba(0,0,0,0.5);
            position:fixed;
            bottom:0;
            left:0;
            z-index:10;
        }
        #Scroll .box{
            width:80%;
            height:20px;
            /*background:blue;*/
            margin:25px auto;
        }
        #Scroll .box .box1{
            width:2%;
            height:100%;
            background: #099eff;
            float:left;
            border-bottom-left-radius: 50%;
            border-top-left-radius: 50%;
        }
        #Scroll .box .box3{
            width:2%;
            height:100%;
            background:#099eff;
            float:right;
            border-bottom-right-radius: 50%;
            border-top-right-radius: 50%;
        }
        #Scroll .box .box2{
            width:96%;
            height:100%;
            background: #9276ff;
            float:left;
            position:relative;
        }
        #Scroll .box .box2 .tt{
            width:5%;
            height:100%;
            background: #35b0ff;
            position:absolute;
            left:0;

        }
        /*图片列表*/
        #imgList{
            width:100%;
            height:800px;
            /*background:red;*/
            position:relative;
            overflow:hidden;
        }
        #imgList ul{
            height:800px;
            width:1000%;
            position:absolute;
            /*border:1px solid blue;*/
        }
        #imgList ul li{
            width:1440px;
            height:100%;
            /*border:1px solid #b738dd;*/
            list-style:none;
            float:left;
        }
    </style>
</head>
<body>
<!--滚动条-->
<div id="Scroll">
    <div class="box">
        <div class="box1"></div>
        <div class="box2">
            <div class="tt"></div>
        </div>
        <div class="box3"></div>
    </div>
</div>
<!--图片列表-->
<div id="imgList">
   <ul>
       <li style="background:url('img/1.jpg')">1</li>
       <li style="background:url('img/2.jpg')">2</li>
       <li style="background:url('img/3.jpg')">3</li>
       <li style="background:url('img/4.jpg')">4</li>
       <li style="background:url('img/5.jpg')">5</li>
       <li style="background:url('img/6.jpg')">6</li>
   </ul>
</div>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".tt").mousedown(function(e){
            var x = e.clientX;
            // alert(x)
            var Left = $(this).offset().left;
            // alert(Left)
            var _L = x - Left;
            // alert(_L)
            $(document).mousemove(function(e){
                var _x = e.clientX;
                //alert(_x);
                var yy = $(".box2").offset().left;
                //alert(yy);
                var _Left = _x - _L - yy;
                document.title =_Left;
                var w = $(".box2").width()-$(".tt").width();
                if (_Left<0){_Left=0;}
                if(_Left>w){_Left=w;}
                $(".tt").css('left',_Left);
                //图片移动
                var b1 = _Left/w;
                var xx = $("#imgList ul li").length-1;
                var _width = 1440*xx*b1;
                $("#imgList ul").css("left",-_width);
            });
            $(document).mouseup(function(){
                $(document).unbind("mousemove");
                $(document).unbind("mouseup");
            });
            return false;
        });
    })
</script>
</body>
</html>